<template>
    <div>
        <div class="top" v-if='!vip'>
            <div class='ctx'>
                <div class="img">
                    <img src="@/assets/images/me/order.png" alt="">
                </div>
                <p>听书VIP·畅听千本好书</p>
                <span @click='goTOOpen'>去开通</span>
            </div>
        </div>
        <div class='vip' v-else>
            <div class="ctx">
                <div class="img">
                    <img :src="borrowUserVo && borrowUserVo.head ? borrowUserVo.head: ''" alt="">
                </div>
                <div class="right">
                    <div class="name" :class="{noVip: !isVip}">
                        {{this.borrowUserVo && this.borrowUserVo.username ? this.borrowUserVo.username: ''}}
                        <img v-if="type === 4 || type === 5" src="@/assets/images/weikaitong.png" alt="">
                        <img v-else-if="type === 1" src="@/assets/images/nianka.png" alt="">
                        <img v-else-if="type === 2" src="@/assets/images/yueka@2x.png" alt="">
                    </div>
                    <div v-if="isVip" class="time">有效期：<span>{{this.borrowUserVo && this.borrowUserVo.beginDate ? this.borrowUserVo.beginDate : ''}}-{{this.borrowUserVo && this.borrowUserVo.endDate ? this.borrowUserVo.endDate : ''}}</span></div>
                </div>
                <span class="gotoopen" v-if="!isVip" @click='goTOOpen'>去开通</span>
            </div>
        </div>
        <div class="recommend">
            <div class='title'>
                主编推荐
            </div>
            <div class="zhubian">
                <div class="commendctx"  v-for='item in homeList.mindBookVo' :key='item.id'  @click='detail(item.id)'>
                    <div class='img'>
                        <img :src="item.audioImg" alt="">
                    </div>
                    <div class='right'>
                        <div class="tit">
                            {{item.title}}
                            |
                            {{item.unscramble}}
                        </div>
                        <div class="ctx">
                            {{item.summary}}
                        </div>
                        <div class="time">
                            {{item.audioDuration}}                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="classification">
            <div class='title'>
                热门分类
                <span @click="moreClass('更多')">更多</span>
            </div>
        </div>
        <div class="type">
            <div class="img" v-for='item in categoryList' :key = 'item.id' @click='moreClass(item.id)'>
                <img :src="item.coverImg" alt="">
                <div class="name">
                    {{item.name}}
                </div>
            </div>
        </div>
        <div class="likeclassification">
            <div class='title'>
                猜你喜欢
                <span @click='nextpage'>换一换</span>
            </div>
        </div>
        <div class="guessYouLike">
            <div class="guessYouLikectx" v-for='item in likeList' :key='item.id' @click='detail(item.id)'>
                <div class='img'>
                    <img :src="item.coverImg" alt="">
                </div>
                <div class='right'>
                    <div class="tit">
                        {{item.title}}|{{item.unscramble}}
                    </div>
                    <div class="ctx">
                        {{item.summary}}
                    </div>
                    <div class="time">
                        {{item.audioDuration}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getHomeList, likeBooks } from "@/utils/api.js";
export default {
    data() {
        return{
            homeList: [],
            categoryList: [],
            likeList: [],
            borrowUserVo: null,
            vip: false, // 是否登录
            isVip: false, // 是不是vip
            page: 1,
            type: 4
        }
    },
    methods: {
        goTOOpen() {
            const uid = this.$router.currentRoute.query.uid
            if (uid) {
                this.$router.push({path: 'confirOrder', query: {uid: uid}})
            } else {
                this.$router.push({path: 'wechatlogin',query:{from:'gotoopen'}})
            }
        },
        moreClass(val) {
            const uid = this.$router.currentRoute.query.uid
            let typeId
            if(val == '更多') {
                typeId = this.categoryList[0].id
            } else {
                typeId = val
            }
                this.$router.push({path: 'productClassify', query: {id: typeId, uid: uid}})
        },
        detail(val) {
            let bookId
            if (val === '主编推荐') {
               bookId =  this.homeList && this.homeList.mindBookVo && this.homeList.mindBookVo[0].id ? this.homeList.mindBookVo[0].id : ''
            } else {
                bookId = val
            }
            const uid = this.$router.currentRoute.query.uid
            this.$router.push({path: 'bookDetail', query: {id: bookId, uid:uid}})
        },
        nextpage() {
            this.page = this.page + 1
            const data = {
                uid: this.$router.currentRoute.query.uid,
                page: this.page,
                pagesize: 10
            }
            likeBooks({data}).then((res) => {
                if (res.data.code == '0') {
                    this.likeList = res.data.result
                }
            })
        }
    },
    mounted() {
        const data = {
            uid: this.$router.currentRoute.query.uid
        }
        getHomeList({data}).then((res) => {
            this.homeList = res.data.result
            this.borrowUserVo = res.data.result.borrowUserVo
            this.type = ~~this.borrowUserVo.type
            if(this.borrowUserVo.type == 4) {
                this.isVip = false
            } else {
                this.isVip = true
            }
            this.categoryList = res.data.result.categoryList
            this.likeList = res.data.result.likeList
        })
        this.vip = this.$router.currentRoute.query.uid ? true : false
    }
}
</script>
<style lang="scss" scoped>
.top{
    width:100%;
    height: 1.6rem;
    background: #434343;
    overflow: hidden;
    .ctx{
        display: flex;
        align-items: center;
        height: 1rem;
        margin: 0.3rem 0;
    }
    .img{
        width: 1rem;
        height: 1rem;
        float: left;
        margin: 0 0.3rem 0 0.3rem; 
        img{
            width: 100%;
            height:100%; 
        }
    }
    p{
        float: left;
        font-size: 0.28rem;
        line-height: 0.75rem;
        height: 0.75rem;
        width: 3rem;
        color: #8e762c;
    }
    span{
        display: block;
        float: right;
        width: 1.2rem;
        height: 0.5rem;
        background: #c39d1e;
        line-height: 0.5rem;
        text-align: center;
        margin-right: 0.6rem;
        margin-left: auto;
        border-radius: 0.08rem;
        color:#434343;
    }
}
.vip{
    width:100%;
    height: 1.6rem;
    background: #434343;
    overflow: hidden;
    .ctx{
        height: 1rem;
        margin: 0.3rem 0;
        display:flex;
        align-items: center;
    }
    .img{
        width: 1rem;
        height: 1rem;
        float: left;
        margin: 0 0.3rem 0 0.3rem; 
        img{
            width: 100%;
            height:100%; 
        }
    }
    .right{
        float: left;
    }
    .name{
        font-size: 0.3rem;
        line-height: 0.3rem;
        height: 0.3rem;
        color: #c39e1f;
        font-family: PingFang-SC-Bold;
        img{
            margin-left: 0.3rem;
            width: 0.9rem;
            height: 0.3rem;
        }
    }
    .time{
        font-size: 0.24rem;
        line-height: 0.24rem;
        height: 0.24rem;
        margin-top: 0.1rem;
        color: #8e762c;
    }
}
.noVip{
    font-size: 0.32rem;
}
.gotoopen{
    display: block;
    width: 1.2rem;
    margin-left: auto;
    height: 0.5rem;
    background: #c39e1f;
    line-height: 0.5rem;
    text-align: center;
    margin-right: 0.6rem;
    border-radius: 0.08rem;
    color:#434343;
}
.title{
    height: 0.8rem;
    color: #0a0a0a;
    font-size: 0.3rem;
    font-family:PingFang-SC-Bold;
    font-weight: 600;
    line-height: 0.8rem;
    padding: 0 0.3rem;
    border-bottom: 1px solid #ccc;
    span{
        display: block;
        float:right;
        font-family:PingFang-SC-Medium;
        color: #707070;
        padding-right: 0.28rem;
        background: url('../../assets/images/next-icon.png') no-repeat center right;
        background-size: 0.09rem 0.15rem;    
    }
}
.likeclassification{
    span{
        display: inline-block;
        padding-right: 0.5rem;
        background: url('../../assets/images/shuaxin.png') no-repeat center right;
        background-size: 0.4rem .4rem;
    }
}
.zhubian{
    height: 3rem;
    display: flex;
    overflow-x: auto;
    border-bottom: 0.16rem solid #efefef;
}
.commendctx{
    margin-left: 0.3rem;
    margin-top: 0.3rem;
    height: 2.4rem;
    width: 4.65rem;
    display: flex;
    .img{
        width:1.8rem;
        height: 2.4rem;
        margin-right: 0.3rem;
        img{
            width:100%;
            height: 100%;
        }
    }
    .right{
      float: left;
      width: 2.89rem;
      .tit{
            font-size: 0.32rem;
            line-height: 0.45rem;
            font-family: PingFang-SC-Bold;
            overflow:hidden; 
            text-overflow:ellipsis;
            display:-webkit-box; 
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2; 
      }
      .ctx{
            margin-top: 0.08rem;
            font-size: 0.26rem;
            line-height: 0.36rem;
            height: 1.1rem;
            color: #707070;
            font-family: PingFang-SC-Medium;
            overflow:hidden; 
            text-overflow:ellipsis;
            display:-webkit-box; 
            -webkit-box-orient:vertical;
            -webkit-line-clamp:3;
      }
      .time{
          font-size: 0.26rem;
          color:#7c7c7c;
          margin-top: 0.02rem;
      }
    }
}
.guessYouLike{
    padding-bottom: 0.9rem;
    .guessYouLikectx{
        border-bottom: 0.01rem solid #ccc;
        padding: 0.3rem 0;
        margin: 0 0.3rem;
        height: 2.4rem;
        overflow: hidden;
        display: flex;
        .img{
            width:1.8rem;
            height: 2.4rem;
            flex: 1;
            img{
                width:100%;
                height: 100%;
            }
        }
        .right{
            position: relative;
            height: 100%;
            flex: 3;
            padding: 0 0 0 0.28rem;
            .tit{
                    font-size: 0.32rem;
                    line-height: 0.45rem;
                    overflow:hidden; 
                    text-overflow:ellipsis;
                    font-family: PingFang-SC-Bold;
                    display:-webkit-box;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2; 
            }
            .ctx{
                    margin-top: 0.08rem;
                    font-size: 0.26rem;
                    line-height: 0.36rem;
                    height: 0.7rem;
                    color: #707070;
                    overflow:hidden; 
                    text-overflow:ellipsis;
                    display:-webkit-box; 
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2;
                    margin-bottom: 0.36rem;
            }
            .time{
                color:#707070;
                margin-top: 0.05rem;
                position: absolute;
                bottom: 0.12rem;
            }
        }
    }
}
.type{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.3rem 0.3rem 0;
    border-bottom: 0.16rem solid #efefef;
    .img{
        height: 1.24rem;
        box-sizing: border-box;
        width: 50%;
        margin-bottom: 0.3rem;
        position: relative;
        img{
            width:100%;
            height: 100%;
        }
        .name{
            position: absolute;
            top: 0.44rem;
            font-size: 0.32rem;
            text-align: center;
            width: 100%;
            color: #fff;
        }
    }
    :nth-of-type(2n) {
        border-left: 0.15rem solid transparent;
    }
    :nth-of-type(2n-1) {
        border-right: 0.15rem solid transparent;
    }

}
.huiyan{
    display: inline-block;
    margin-left: 0.5rem;
}
</style>
